<template>
	<div id="container">
		<statistics>
			<template #img><img src="../../assets/images/系统状态-任务状态.png" alt="" /></template>
			<template #header>实时状态监控</template>
			<template #subhead>Real-time monitoring</template>
		</statistics>
		<section class="progressBox">
			<ul>
				<li>
					<dv-decoration-9
						dur="12"
						style="font-size: 0.22rem; width: 1.1rem; height: 1.1rem; font-weight: 600"
						>100%</dv-decoration-9
					>
					<p>仓库分拣进度</p>
				</li>
				<li>
					<dv-decoration-9
						dur="12"
						style="font-size: 0.25rem; width: 1.1rem; height: 1.1rem; font-weight: 600"
						>66%</dv-decoration-9
					>
					<p>物流运输进度</p>
				</li>
				<li>
					<dv-decoration-9
						dur="12"
						style="font-size: 0.25rem; width: 1.1rem; height: 1.1rem; font-weight: 600"
						>66%</dv-decoration-9
					>
					<p>异常处理进度</p>
				</li>
			</ul>
			<div class="progress">
				<div class="progressCharts">
					<img src="../../assets/images/仓库_库存_o.png" alt="" class="warehouse" />
					<div class="mainBox">
						<div
							class="carBkg"
							:data-percentum="this.percentum"
							:style="{ '--percentum': this.percentum }"
						></div>
						<div class="chart" ref="progressChartRef"></div>
					</div>
					<img src="../../assets/images/定位.png" alt="" class="destination" />
				</div>
			</div>
		</section>
	</div>
</template>
<script>
	import * as echarts from 'echarts';
	import statistics from '@/components/statistics.vue';
	export default {
		props: {
			chartData: {
				default: () => {
					return {};
				},
			},
		},
		components: {
			statistics,
		},
		data() {
			return {
				chart: null,
				max: 1000000,
				nowadays: 608153,
				percentum: '',
			};
		},
		computed: {
			cssVars() {
				return {
					'--background-position': this.percentum,
				};
			},
		},
		mounted() {
			this.initChart();
			this.progressNum();
			window.addEventListener('resize', () => {
				// 判断是否存在，直接调用resize方法
				if (this.chart) this.chart.resize();
			});
		},
		methods: {
			progressNum() {
				let num = this.nowadays / this.max;
				num = num * 100;
				this.percentum = num + '%';
			},
			initChart() {
				this.chart = echarts.init(this.$refs['progressChartRef']);
				let option = {
					grid: {
						left: '0', //grid 组件离容器左侧的距离。
						right: '0', //grid 组件离容器右侧的距离。
					},
					xAxis: {
						show: false, //是否显示 x 轴。
						type: 'value', //坐标轴类型。 value  category time log
						min: 0.0, //坐标轴刻度最小值
						max: this.max, //最大值
					},
					yAxis: { data: [] }, //data为所有类目名称列表 例:data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					legend: {
						borderColor: '#fff', //边框色
					},
					series: [
						{
							type: 'bar', //type的值取决于你想用什么样的图例
							barWidth: '100%',
							data: [this.nowadays], //当前值
							global: false, // 缺省为 false
							showBackground: 'true',
							itemStyle: {
								normal: {
									color: {
										type: 'linear',
										x: 1,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [
											{
												offset: 0,
												color: '#23B3DB', // 0% 处的颜色
											},
											{
												offset: 1,
												color: '#FFF', // 100% 处的颜色
											},
										],
									},
								},
							},
						},
					],
				};
				this.chart.setOption(option);
			},
		},
	};
</script>
<style scoped>
	#container {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.progress {
			.progressCharts {
				display: flex;
				justify-content: center;
				.mainBox {
					width: 60%;
					position: relative;
					.carBkg {
						width: 100%;
						margin: 0 auto;
						height: 0.4375rem;
						background: url('../../assets/images/火箭.png') no-repeat;
						background-size: contain;
						background-position: var(--percentum);
						transition: background-position 1.3s;
					}
					.chart {
						height: 0.125rem;
						margin: 0;
					}
				}

				.warehouse {
					width: 0.5rem;
					height: 0.5rem;
				}
				.destination {
					width: 0.3rem;
					height: 0.5rem;
				}
			}
		}
		.progressBox {
			ul {
				margin-top: 0.125rem;
				flex: 1;
				width: 100%;
				list-style: none;
				display: flex;
				justify-content: space-around;
				margin-bottom: 0.125rem;
				li {
					text-align: center;
					p {
						font-weight: 600;
						font-size: 0.175rem;
					}
				}
			}
		}
	}
</style>
